<script setup>
import axios from "axios";
import { onMounted, ref, inject, watch } from "vue";
import { useRouter } from "vue-router";
import { useSideBarStore } from "@/stores/homePage/SideBar/index.js";
import { storeToRefs } from "pinia";
const { activeFlag, parentType } = storeToRefs(useSideBarStore());
const router = useRouter();

//接收gotop方法
const goTop = inject("goTop");
const activeArr = ref([]);

const titleList = ref([]);

// // 小站推荐
const xztjArr = ref([]);
// //常用站点
const cyzdArr = ref([]);
const cyzdItems = ref([]);
// //资源搜索
const zyssArr = ref([]);
// //软件游戏
const rjyxArr = ref([]);
const rjyxItems = ref([]);
// //阅读动画
const yddhArr = ref([]);
const yddhItems = ref([]);
// //音乐动听
const yydtArr = ref([]);
const yydtItems = ref([]);
// //实用工具
const sygjArr = ref([]);
const sygjItems = ref([]);
// //学习教育
const xxjyArr = ref([]);
const xxjyItems = ref([]);
// //办公素材
const bgscArr = ref([]);
const bgscItems = ref([]);

//从所有数据中进行分类
const getUrlFn = (type, arr) => {
  let list = [];
  list = arr.filter((item) => item.type == type);
  return list;
};

//初始数据的筛选
const getItemsFn = (parent, arr) => {
  let items = [];
  items = arr.filter((item) => item.parent == parent);
  return items;
};
let hash = ref(window.location.hash.substring(1));
const updateHash = () => {
  let newHash = window.location.hash.substring(1);
  if (newHash != hash.value) {
    hash.value = newHash;
  }
};

//
onMounted(async () => {
  //页面的hash发生改变
  updateHash();
  window.addEventListener("hashchange", updateHash);

  if (localStorage.getItem("active")) {
    activeArr.value = JSON.parse(localStorage.getItem("active"));
    console.log(activeArr.value);
  } else {
    activeArr.value = [
      "xztj",
      "yd2",
      "wpss3",
      "zh4",
      "ydxs5",
      "zxyy6",
      "zh7",
      "hhxx8",
      "ppt9",
    ];
    localStorage.setItem("active", JSON.stringify(activeArr.value));
  }
  let { data } = await axios.get("http://localhost:3000/asideList");
  let res = await axios.get("http://localhost:3000/urlList");
  xztjArr.value = getUrlFn("xztj", res.data);
  cyzdArr.value = getUrlFn("cyzd", res.data);
  zyssArr.value = getUrlFn("zyss", res.data);
  rjyxArr.value = getUrlFn("rjyx", res.data);
  yddhArr.value = getUrlFn("yddh", res.data);
  yydtArr.value = getUrlFn("yydt", res.data);
  sygjArr.value = getUrlFn("sygj", res.data);
  xxjyArr.value = getUrlFn("xxjy", res.data);
  bgscArr.value = getUrlFn("bgsc", res.data);

  //初始数据筛选
  cyzdItems.value = getItemsFn(activeArr.value[1], cyzdArr.value);
  rjyxItems.value = getItemsFn(activeArr.value[3], rjyxArr.value);
  yddhItems.value = getItemsFn(activeArr.value[4], yddhArr.value);
  yydtItems.value = getItemsFn(activeArr.value[5], yydtArr.value);
  sygjItems.value = getItemsFn(activeArr.value[6], sygjArr.value);
  xxjyItems.value = getItemsFn(activeArr.value[7], xxjyArr.value);
  bgscItems.value = getItemsFn(activeArr.value[8], bgscArr.value);

  titleList.value = data;

  const hash = window.location.hash.substring(1);
  if (hash) {
    setTimeout(() => scrollToElement(hash), 100);
  }
});
const scrollToElement = (id) => {
  const ele = document.getElementById(id);
  if (ele) {
    ele.scrollIntoView({ behavior: "smooth" });
  } else {
    console.log(ele);
  }
};
watch(hash, () => {
  activeArr.value[activeFlag.value] = hash.value;

  activeArr.value[activeFlag.value] = hash.value;
  switch (parentType.value) {
    case "cyzd":
      cyzdItems.value = getItemsFn(hash.value, cyzdArr.value);
      console.log(cyzdItems.value);
      console.log(hash.value);
      console.log(cyzdArr.value);
      break;
    case "rjyx":
      rjyxItems.value = getItemsFn(hash.value, rjyxArr.value);
      break;
    case "yddh":
      yddhItems.value = getItemsFn(hash.value, yddhArr.value);
      break;
    case "yydt":
      yydtItems.value = getItemsFn(hash.value, yydtArr.value);
      break;
    case "sygj":
      sygjItems.value = getItemsFn(hash.value, sygjArr.value);
      break;
    case "xxjy":
      xxjyItems.value = getItemsFn(hash.value, xxjyArr.value);
      break;
    case "bgsc":
      bgscItems.value = getItemsFn(hash.value, bgscArr.value);
      break;
  }
  localStorage.setItem("active", JSON.stringify(activeArr.value));
});
watch(activeFlag, () => {
  // console.log(activeFlag.value);

    activeArr.value[activeFlag.value] = hash.value;
    switch (parentType.value) {
      case "cyzd":
        cyzdItems.value = getItemsFn(hash.value, cyzdArr.value);
        console.log(cyzdItems.value);
        console.log(hash.value);
        console.log(cyzdArr.value);
        break;
      case "rjyx":
        rjyxItems.value = getItemsFn(hash.value, rjyxArr.value);
        break;
      case "yddh":
        yddhItems.value = getItemsFn(hash.value, yddhArr.value);
        break;
      case "yydt":
        yydtItems.value = getItemsFn(hash.value, yydtArr.value);
        break;
      case "sygj":
        sygjItems.value = getItemsFn(hash.value, sygjArr.value);
        break;
      case "xxjy":
        xxjyItems.value = getItemsFn(hash.value, xxjyArr.value);
        break;
      case "bgsc":
        bgscItems.value = getItemsFn(hash.value, bgscArr.value);
        break;
    }
    localStorage.setItem("active", JSON.stringify(activeArr.value));

});

const goMain = (id) => {
  goTop();
  // console.log(window.screenTop);
  router.push(`/main?id=${id}`);
};

const fn = (type, id, arr) => {
  console.log(type, id, arr);
  switch (type) {
    case "cyzd":
      cyzdItems.value = getItemsFn(id, arr);
      activeArr.value[1] = id;
      break;
    case "rjyx":
      rjyxItems.value = getItemsFn(id, arr);
      activeArr.value[3] = id;
      break;
    case "yddh":
      yddhItems.value = getItemsFn(id, arr);
      activeArr.value[4] = id;
      break;
    case "yydt":
      yydtItems.value = getItemsFn(id, arr);
      activeArr.value[5] = id;
      break;
    case "sygj":
      sygjItems.value = getItemsFn(id, arr);
      activeArr.value[6] = id;
      break;
    case "xxjy":
      xxjyItems.value = getItemsFn(id, arr);
      activeArr.value[7] = id;
      break;
    case "bgsc":
      bgscItems.value = getItemsFn(id, arr);
      activeArr.value[8] = id;
      break;
  }
  localStorage.setItem("active", JSON.stringify(activeArr.value));
};
</script>

<template>
  <!-- 小站推荐 -->
  <div class="element" ref="items">
    <div class="title one">
      <div class="title_top">
        <i class="iconfont icon-icon"></i>
        <h3 id="xztj">小站推荐</h3>
      </div>
    </div>
    <div class="items">
      <ul>
        <li v-for="item in xztjArr" :key="item.id" @click="goMain(item.id)">
          <div class="name">
            <img :src="item.img" alt="" />
            <span>{{ item.name }}</span>
          </div>
          <i class="iconfont icon-yuanjiantou"></i>
        </li>
      </ul>
    </div>
  </div>
  <!-- 常用站点 -->
  <div class="element" ref="items">
    <div class="title">
      <div class="title_top">
        <i class="iconfont icon-shoucang"></i>
        <h3 id="cyzd">常用站点</h3>
      </div>
      <div class="title_bottom">
        <ul>
          <li
            v-for="label in titleList[1]?.type"
            :key="label.id"
            :id="`${label.id}`"
            @click="fn(titleList[1].toA, label.id, cyzdArr)"
            :class="activeArr[1] == label.id ? 'active' : ''"
          >
            {{ label.name }}
          </li>
        </ul>
      </div>
    </div>
    <div class="items">
      <ul>
        <li v-for="item in cyzdItems" :key="item.id" @click="goMain(item.id)">
          <div class="name">
            <img :src="item.img" alt="" />
            <span>{{ item.name }}</span>
          </div>
          <i class="iconfont icon-yuanjiantou"></i>
        </li>
      </ul>
    </div>
  </div>
  <!-- 资源搜索 -->
  <div class="element" ref="items">
    <div class="title">
      <div class="title_top">
        <i class="iconfont icon-sousuo1"></i>
        <h3 id="zyss">资源搜索</h3>
      </div>
      <div class="title_bottom">
        <ul>
          <li
            v-for="label in titleList[2]?.type"
            :key="label.id"
            :id="`${label.id}`"
            :class="activeArr[2] == label.id ? 'active' : ''"
          >
            {{ label.name }}
          </li>
        </ul>
      </div>
    </div>
    <div class="items">
      <ul>
        <li v-for="item in zyssArr" :key="item.id" @click="goMain(item.id)">
          <div class="name">
            <img :src="item.img" alt="" />
            <span>{{ item.name }}</span>
          </div>
          <i class="iconfont icon-yuanjiantou"></i>
        </li>
      </ul>
    </div>
  </div>
  <!-- 软件游戏 -->
  <div class="element" ref="items">
    <div class="title">
      <div class="title_top">
        <i class="iconfont icon-dianshiji"></i>
        <h3 id="rjyx">软件游戏</h3>
      </div>
      <div class="title_bottom">
        <ul>
          <li
            v-for="label in titleList[3]?.type"
            :key="label.id"
            :id="`${label.id}`"
            @click="fn(titleList[3].toA, label.id, rjyxArr)"
            :class="activeArr[3] == label.id ? 'active' : ''"
          >
            {{ label.name }}
          </li>
        </ul>
      </div>
    </div>
    <div class="items">
      <ul>
        <li v-for="item in rjyxItems" :key="item.id" @click="goMain(item.id)">
          <div class="name">
            <img :src="item.img" alt="" />
            <span>{{ item.name }}</span>
          </div>
          <i class="iconfont icon-yuanjiantou"></i>
        </li>
      </ul>
    </div>
  </div>
  <!-- 阅读动画 -->
  <div class="element" ref="items">
    <div class="title">
      <div class="title_top">
        <i class="iconfont icon-shuben"></i>
        <h3 id="yddh">阅读动画</h3>
      </div>
      <div class="title_bottom">
        <ul>
          <li
            v-for="label in titleList[4]?.type"
            :key="label.id"
            :id="`${label.id}`"
            @click="fn(titleList[4].toA, label.id, yddhArr)"
            :class="activeArr[4] == label.id ? 'active' : ''"
          >
            {{ label.name }}
          </li>
        </ul>
      </div>
    </div>
    <div class="items">
      <ul>
        <li v-for="item in yddhItems" :key="item.id" @click="goMain(item.id)">
          <div class="name">
            <img :src="item.img" alt="" />
            <span>{{ item.name }}</span>
          </div>
          <i class="iconfont icon-yuanjiantou"></i>
        </li>
      </ul>
    </div>
  </div>
  <!-- 音乐动听 -->
  <div class="element" ref="items">
    <div class="title">
      <div class="title_top">
        <i class="iconfont icon-yinfu"></i>
        <h3 id="yydt">音乐动听</h3>
      </div>
      <div class="title_bottom">
        <ul>
          <li
            v-for="label in titleList[5]?.type"
            :key="label.id"
            :id="`${label.id}`"
            @click="fn(titleList[5].toA, label.id, yydtArr)"
            :class="activeArr[5] == label.id ? 'active' : ''"
          >
            {{ label.name }}
          </li>
        </ul>
      </div>
    </div>
    <div class="items">
      <ul>
        <li v-for="item in yydtItems" :key="item.id" @click="goMain(item.id)">
          <div class="name">
            <img :src="item.img" alt="" />
            <span>{{ item.name }}</span>
          </div>
          <i class="iconfont icon-yuanjiantou"></i>
        </li>
      </ul>
    </div>
  </div>
  <!-- 实用工具 -->
  <div class="element" ref="items">
    <div class="title">
      <div class="title_top">
        <i class="iconfont icon-gongju"></i>
        <h3 id="sygj">实用工具</h3>
      </div>
      <div class="title_bottom">
        <ul>
          <li
            v-for="label in titleList[6]?.type"
            :key="label.id"
            :id="`${label.id}`"
            @click="fn(titleList[6].toA, label.id, sygjArr)"
            :class="activeArr[6] == label.id ? 'active' : ''"
          >
            {{ label.name }}
          </li>
        </ul>
      </div>
    </div>
    <div class="items">
      <ul>
        <li v-for="item in sygjItems" :key="item.id" @click="goMain(item.id)">
          <div class="name">
            <img :src="item.img" alt="" />
            <span>{{ item.name }}</span>
          </div>
          <i class="iconfont icon-yuanjiantou"></i>
        </li>
      </ul>
    </div>
  </div>
  <!-- 学习教育 -->
  <div class="element" ref="items">
    <div class="title">
      <div class="title_top">
        <i class="iconfont icon-xuexi"></i>
        <h3 id="xxjy">学习教育</h3>
      </div>
      <div class="title_bottom">
        <ul>
          <li
            v-for="label in titleList[7]?.type"
            :key="label.id"
            :id="`${label.id}`"
            @click="fn(titleList[7].toA, label.id, xxjyArr)"
            :class="activeArr[7] == label.id ? 'active' : ''"
          >
            {{ label.name }}
          </li>
        </ul>
      </div>
    </div>
    <div class="items">
      <ul>
        <li v-for="item in xxjyItems" :key="item.id" @click="goMain(item.id)">
          <div class="name">
            <img :src="item.img" alt="" />
            <span>{{ item.name }}</span>
          </div>
          <i class="iconfont icon-yuanjiantou"></i>
        </li>
      </ul>
    </div>
  </div>
  <!-- 办公素材 -->
  <div class="element" ref="items">
    <div class="title">
      <div class="title_top">
        <i class="iconfont icon-jichubangong"></i>
        <h3 id="bgsc">办公素材</h3>
      </div>
      <div class="title_bottom">
        <ul>
          <li
            v-for="label in titleList[8]?.type"
            :key="label.id"
            :id="`${label.id}`"
            @click="fn(titleList[8].toA, label.id, bgscArr)"
            :class="activeArr[8] == label.id ? 'active' : ''"
          >
            {{ label.name }}
          </li>
        </ul>
      </div>
    </div>
    <div class="items">
      <ul>
        <li v-for="item in bgscItems" :key="item.id" @click="goMain(item.id)">
          <div class="name">
            <img :src="item.img" alt="" />
            <span>{{ item.name }}</span>
          </div>
          <i class="iconfont icon-yuanjiantou"></i>
        </li>
      </ul>
    </div>
  </div>
</template>

<style scoped>
@import url("/src/assets/style/comStyle/element/element.scss");
</style>
